<!-- <script setup>
  import {reactive,ref,computed,watch} from 'vue';
  import MyButton from './components/MyButton.vue';


  let num = ref('');
  //计算属性(一定有返回值):会在vue中进行缓存，如果绑定的num状态不改变，那么直接从缓存获取
  //创建阶段
  // const numDouble = computed(()=> num.value*2);
function fn() {
  num.value=num.value.split('').reverse().join('')
}
var bbb=computed(()=> num.value.split('').reverse().join('')


)
  //侦听器
  // watch(num,(newval,oldval)=>{
  //   console.log(newval+'改变了' + oldval);
  // },{immediate:true});

  //父子组件通信
/*   function onAdd(e) {
    num.value = e;
  } */
</script>
 -->

<script setup>
import { ref, reactive, computed } from 'vue';
import TodoHeader from './components/TodoHeader.vue';
import TodoItem from './components/TodoItem.vue';
import TodoFooter from './components/TodoFooter.vue';
const filter = ref('');
const todoList = ref([
  { id: 1, title: '吃饭', done: false, edit: false },
  { id: 2, title: '睡觉', done: true, edit: false },
]);
function onAdd(e) {
  if (e === '') return;
  todoList.value.unshift({
    id: Date.now(),
    title: e,
    done: false,
    edit: false
  });
};
//删除：根据id删除，先查询对应下标，再使用splice删除
function onDelete(id) {
  let index = todoList.value.findIndex((item) => item.id === id);
  if (index != -1) {
    todoList.value.splice(index, 1)
  }
}

function Editing(item){
  item.edit=true
  console.log(item);
}

const undoCount = computed(() => todoList.value.filter((item) => item.done === false).length)
const filterDone = computed(() => {
  // console.log(filter.value);
  if (filter.value === '') return todoList.value;
  return todoList.value.filter((item) => (item.done === filter.value))
})
</script>


<template>
  <section id="app" class="todoapp">
    <todo-header @add="onAdd"></todo-header>
    <section class="main">
      <input type="checkbox" class="toggle-all" />
      <ul class="todo-list">
        <todo-item v-for="(item, index) in filterDone" v-model:done="item.done" @delete="onDelete(item.id)"
          v-model:title="item.title" v-model:edit="item.edit"  @dblclick="Editing(item)"></todo-item>
      </ul>
    </section>
    <todo-footer :undo="undoCount" v-model:filter="filter" ></todo-footer>
  </section>
  <footer class="info">
    <p>双击待办项以编辑。</p>
  </footer>
</template>


